<template>
    <el-aside width="210px" >
        <el-row class="tac">
            <el-col :span="20">
                <h5 class="menu_name">菜单</h5>
                <el-menu
                        :default-active="this.$store.state.left_menu"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span class="title">团队管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="$commonJs.goPage('/userList')">用户列表</el-menu-item>
                            <el-menu-item index="1-2" @click="$commonJs.goPage('/teamList')">团队列表</el-menu-item>
                            <el-menu-item index="1-3" @click="$commonJs.goPage('/teamTreeList')">树型结构</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span class="title">业绩统计</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="$commonJs.goPage('/pureMoneyInto')">净资金流入</el-menu-item>
                            <el-menu-item index="2-2" @click="$commonJs.goPage('/intoMoneyNum')">入金统计</el-menu-item>
                            <el-menu-item index="2-3" @click="$commonJs.goPage('/outMoneyNum')">出金统计</el-menu-item>
                            <el-menu-item index="2-4" @click="$commonJs.goPage('/userIntoQuery')">用户回本查询</el-menu-item>
                            <el-menu-item index="2-5" @click="$commonJs.goPage('/newAddOrderNum')">新增持仓订单统计</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span class="title">排行榜</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" @click="$commonJs.goPage('/intoMoneyRank')">入金团队排行榜</el-menu-item>
                            <el-menu-item index="3-2" @click="$commonJs.goPage('/outMoneyRank')">出金团队排行榜</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </el-aside>
</template>
<script>
    var $this = {};
    export default {
        name: "Nav-left",
        data() {
            return {};
        },
        beforeCreate() {
            $this = this;
        },
        mounted() {

        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        }
</script>

<style scoped>
    .el-row{
        height: 100%;
    }

    .el-menu{
        border-right:none;
    }
    .el-aside{
        border-right: 1px solid #f5f1f1;
    }
    .title{
        font-size: 1rem !important;
    }
    .el-icon-s-order,.el-icon-menu,.el-icon-location{
        font-size: 0.9rem;
    }
    .menu_name{
        position: relative;
        text-align: left;
        color: #C7C9CD;
        padding: 10px 25px 10px 34px
    }
    .el-submenu{
        text-align: left;
    }
    .title{
        padding-left: 28px;
    }
    .el-menu-item{
        font-size: 0.9rem;
        padding-left:3.3rem !important;
    }
</style>
